import React, { Fragment, useContext, useEffect, useState } from 'react'
import "./announcement.less"
import { deleteAnnouncement, reqAddAnnouncement, reqAnnouncementList, reqTimeToSearch, reqUpdateAnnouncement } from '@/api/api'
import { Spin, message } from 'antd'
import { Context } from '@/App'

import UpdateAnnouncement from '@/components/Announcement/UpdateAnnouncement'
import ShowAnnouncement from '@/components/Announcement/ShowAnnouncement'
import AnnouncementSearch from '@/components/Announcement/AnnouncementSearch'
import AnnouncementList from '@/components/Announcement/AnnouncementList'
import AddAnnouncement from '@/components/Announcement/AddAnnouncement'

export default function Announcement() {
  const [showOpen, setShowOpen] = useState(false)
  const [updateAnnouncement, setUpdateAnnouncement] = useState(false)
  const [addOpen, setAddOpen] = useState(false)
  const [loading, setLoading] = useState(true)

  const [announcement, setAnnouncement] = useState()
  const [announcementItemInfor, setAnnouncementItemInfor] = useState(null)

  const { role } = useContext(Context)


  const dataToChang = (_date, date) => {
    if (!date) {
      getAnnouncementList(setAnnouncement)
    } else {
      reqTimeToSearch({ date }).then(
        res => {
          if (res.status === 200) {
            setAnnouncement(res.data)
          }
          if (res.status === 201) {
            message.error("查询错误")
          }
        }
      )
    }
  }

  // 获取公告数据
  const getAnnouncementList = (setMethod, data) => {
    setLoading(true)
    reqAnnouncementList(data).then(
      res => {
        setLoading(false)
        setMethod(res.data)
      }
    )
  }

  useEffect(() => {
    getAnnouncementList(setAnnouncement)
  }, [])

  const announcementItem = (data) => {
    // 一条公告的信息
    getAnnouncementList(setAnnouncementItemInfor, { fd_id: data.fd_id })
  }

  // 展示公告信息
  const showAnn = () => {
    setShowOpen(true)
  }

  //  点击修改/删除
  const handleMenuClick = (e, fd_id) => {

    if (e.key === "update") {
      setUpdateAnnouncement(true)
      reqAnnouncementList({ fd_id: fd_id }).then(
        res => {
          setAnnouncementItemInfor(res.data)
        }
      )
    } else if (e.key === "delete") {
      deleteAnnouncement({ fd_id: fd_id }).then(
        res => {
          if (res.status === 200) {
            getAnnouncementList(setAnnouncement)
            message.success(res.data)
          } else if (res.status === 201) {
            message.error("删除失败")
          }
        }
      )
    }
  };

  const updateSubmit = (data) => {
    console.log(data);
    // 判断标题和内容是否有值，或者标题与数据库的不一致
    const isTitleContentValid = (!!data.fd_content && !!data.fd_title) || (announcementItemInfor?.fd_title !== data.fd_title);
    // 判断标题和内容是否与数据库的一致
    const isContentTitleDifferent = announcementItemInfor?.fd_content !== data.fd_content || announcementItemInfor?.fd_title !== data.fd_title;

    if (isTitleContentValid) {
      if (isContentTitleDifferent) {
        if (data.fd_content !== '<p></p>') {
          if (!data.fd_content) {
            delete data["fd_content"]
          }
          reqUpdateAnnouncement({ ...data, fd_teacNum: role?.fd_idNum }).then(
            res => {
              if (res.status === 200) {
                getAnnouncementList(setAnnouncement)
                message.success(res.data)
              } else if (res.status === 201) {
                message.error("修改失败")
              }
            }
          )
        }
      }
    }
    setAnnouncementItemInfor(null)
    setUpdateAnnouncement(false)
  }

  const addSubmit = (data) => {
    const { fd_title, fd_content } = data
    if (fd_title && fd_content) {
      reqAddAnnouncement({ data, role }).then(
        res => {
          if (res.status === 200) {
            getAnnouncementList(setAnnouncement)
            message.success(res.data)
          }
          if (res.status === 201) {
            message.error("添加失败")
          }
        }
      )
    }
    setAddOpen(false)
  }

  return (
    <Fragment>
      <div className='announcement-box '>
        {
          loading ? <Spin size='large' className='loading' /> :
            <>
              <div className='announcement-select'>
                <AnnouncementSearch
                  dataToChang={dataToChang}
                  setAddOpen={setAddOpen}
                  role={role}
                />
              </div>
              <div className='announcement-table'>
                <AnnouncementList
                  role={role}
                  announcementItem={announcementItem}
                  showAnn={showAnn}
                  announcement={announcement}
                  handleMenuClick={handleMenuClick}
                />
              </div>
            </>
        }
      </div>
      <ShowAnnouncement
        open={showOpen}
        onCancel={() => {
          setShowOpen(false)
          setAnnouncementItemInfor(null)
        }}
        announcementItemInfor={announcementItemInfor}
      />
      <UpdateAnnouncement
        defaultInfor={announcementItemInfor}
        open={updateAnnouncement}
        onCancel={() => {
          setAnnouncementItemInfor(null)
          setUpdateAnnouncement(false)
        }}
        onCreate={updateSubmit}
      />
      <AddAnnouncement
        open={addOpen}
        onCancel={() => {
          setAddOpen(false)
        }}
        onCreate={addSubmit}
      />
    </Fragment>
  )
}
